<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :column="column"
        :operateList="operateList"
        :getList="quoteConfirmPage"
        uniqueId="quoteOrderTable"
      ></ele-page>
    </div>
    <ele-form-drawer
      class="dialog-pack"
      :isLoading="isLoading"
      :isShowBackBtn="false"
      :isShowSubmitBtn="false"
      :isShowCancelBtn="false"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
      size="95%"
    >
      <el-row type="flex" class="row-bg" justify="end">
        <el-button type="primary" v-if="this.showSubmit" @click="handleSubmit({...formDataDialog})">提交</el-button>
      </el-row>
    </ele-form-drawer>
  </div>
</template>

<script>
import { searchConfig, rowConfig,operateList } from './config'

import {
  quoteOrderCreate,
  quoteOrderDeleteById,
  quoteOrderGetById,
  quoteConfirmPage,
  quoteOrderUpdate, quoteConfirmUpdate, quoteConfirmOrderGetById
} from '@/api/quote/order'
import { formDescDialogMixin,exportExlUrl } from '@/views/quote/confirm/config'
import {exportExcel, uniqueKey} from '@/utils/judge'

export default {
  name: 'quoteOrder',
  mixins: [searchConfig, formDescDialogMixin],
  data() {
    const self = this
    return {
      title: null,
      visible: false,
      isLoading: false,
      showSubmit: true,
      loading: false,
      repairSelectAll:false,
      formDataDialog: {},
      // formDescDialog, //新增修改框
      operateList,
      quoteConfirmPage,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: 'orderCode',
          label: '订单编号',
          showOverflowTooltip: true
        },
        {
          prop: 'modelName',
          label: '车型',
          showOverflowTooltip: true
        },
        {
          prop: 'vinCode',
          label: 'vin码',
          showOverflowTooltip: true
        },
        {
          prop: 'uwbCode',
          label: 'uwb编码',
          showOverflowTooltip: true
        },
        {
          prop: 'vehicleRegisterDate',
          label: '首次上牌时间',
        },
        {
          prop: 'vehicleGuidePrice',
          label: '新车指导价',
        },
        {
          prop: 'quoteConfirmHours',
          label: '工时费用(元)',
          showOverflowTooltip: true
        },
        {
          prop: 'quoteConfirmItems',
          label: '配件费用(元)',
          showOverflowTooltip: true
        },
        {
          prop: 'quoteExtra',
          label: '固定费用(元)',
          showOverflowTooltip: true
        },
        {
          prop: 'quoteConfirmTotal',
          label: '总价(元)',
          showOverflowTooltip: true
        },
        // {
        //   prop: 'quoteState1',
        //   label: '报价单状态',
        //   render: (h, scope) => {
        //     if (scope.row.quoteState === '0') {
        //       return (
        //         <el-tag color="#ccc" effect="dark" size="medium">
        //           {'草稿'}
        //         </el-tag>
        //       )
        //     } else if (scope.row.quoteState === '1') {
        //       return (
        //         <el-tag color="skyblue" effect="dark" size="medium">
        //           {'推送'}
        //         </el-tag>
        //       )
        //     }  else if (scope.row.quoteState === '2') {
        //       return (
        //         <el-tag color="green" effect="dark" size="medium">
        //           {'确认'}
        //         </el-tag>
        //       )
        //     } else if (scope.row.quoteState === '-1') {
        //       return (
        //         <el-tag color="#ccc" effect="dark" size="medium">
        //           {'未创建'}
        //         </el-tag>
        //       )
        //     }
        //   },
        //   showOverflowTooltip: true
        // },
        {
          prop: 'quoteState2',
          label: '推送状态',
          render: (h, scope) => {
            if (scope.row.repairPushCount + scope.row.extraPushCount === 0) {
              return (
                <el-tag color="#ccc" effect="dark" size="medium">
                  {'未推送'}
                </el-tag>
              )
            } else if (scope.row.repairPushCount + scope.row.extraPushCount > 0 && scope.row.repairPushCount + scope.row.extraPushCount < scope.row.repairCount + scope.row.extraCount) {
              return (
                <el-tag color="skyblue" effect="dark" size="medium">
                  {'部分推送'}
                </el-tag>
              )
            } else if (scope.row.repairPushCount + scope.row.extraPushCount === scope.row.repairCount + scope.row.extraCount) {
              return (
                <el-tag color="green" effect="dark" size="medium">
                  {'全部推送'}
                </el-tag>
              )
            }
          },
          showOverflowTooltip: true
        },
        {
          prop: 'quoteState3',
          label: '确认状态',
          render: (h, scope) => {
            if (scope.row.confimCount === 0) {
              return (
                <el-tag color="#ccc" effect="dark" size="medium">
                  {'未确认'}
                </el-tag>
              )
            } else if (scope.row.confimCount > 0 && scope.row.confimCount +scope.row.extraPushCount < scope.row.repairCount  + scope.row.extraCount)  {
              return (
                <el-tag color="skyblue" effect="dark" size="medium">
                  {'部分确认'}
                </el-tag>
              )
            } else if (scope.row.confimCount + scope.row.extraPushCount === scope.row.repairCount + scope.row.extraCount ) {
              return (
                <el-tag color="green" effect="dark" size="medium">
                  {'全部确认'}
                </el-tag>
              )
            }
          },
          showOverflowTooltip: true
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 160,
          fixed: 'right',
          render: (h, scope) => {
            return (
              <ele-row-operation
                scope={scope}
                rowConfig={rowConfig}
                onRowOperate={this.rowOperate}
              />
            )
          }
        }
      ]
    }
  },
  computed: {},
  methods: {
    ConfirmAllIn()
    {
      this.formDataDialog.repairList.forEach((val) => {
        if(val.isConfirmOg === '0')
        {
          val.isConfirm = '1'
        }
      })
    },
    ConfirmAllOut()
    {
      this.formDataDialog.repairList.forEach((val) => {
        if(val.isConfirmOg === '0')
        {
          val.isConfirm = '2'
        }
      })
    },
    responseRepairList(data) {
      let newData = []
      data.forEach((val) => {
        const item = {
          repairId: val.id,
          repairItem: val.repairItem,
          repairQuote: val.repairHoursTotalPrice
        }
        newData.push(item)
      })

      let list = [...(this.formDataDialog?.repairList ?? []), ...newData.map((ite) => ite)]
      // 筛选重复值,插入
      this.$set(this.formDataDialog, 'repairList', uniqueKey(list, 'repairItem'))
    },
    responseExtraList(data) {
      console.log(data)
      let newData = []
      data.forEach((val) => {
        const item = {
          extraId: val.id,
          extraName: val.description
        }
        newData.push(item)
      })
      let list = [...(this.formDataDialog?.extraList ?? []), ...newData.map((ite) => ite)]
      // 筛选重复值,插入
      this.$set(this.formDataDialog, 'extraList', uniqueKey(list, 'extraName'))
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          quoteConfirmOrderGetById(row.mmcId).then((res) => {
            this.formDataDialog = res.data.result
          })

          this.visible = true
        },
        exportExl: () => {
          console.log('导出触发' + row.mmcId)
          this.exportEXl(row.mmcId)
        },
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态 submitProdAreaList
      // let canSubmit = false;
      // this.formDataDialog.repairList.forEach((val) => {
      //   //点进来之前是未确认，提交时是已确认
      //   if(val.isConfirmOg === '0' && val.isConfirm !== '0')
      //   {
      //     canSubmit = true;
      //   }
      // })
      // if(canSubmit)
      // {
      //
      // }
      // else
      // {
      //   this.$message.warning("没有需要确认的数据")
      // }
      this.$confirm(
        "该操作无法撤回，请确实是否提交",
        $i18n.t("common.tip"),
        {
          confirmButtonText: $i18n.t("common.ok"),
          cancelButtonText: $i18n.t("common.cancel"),
          type: "warning",
        }
      ).then(() => {
        const params = {
          title: "确认完成",
          api: quoteConfirmUpdate,
          data
        }
        this.doSubmit(params)
      });

    },
    // 删除
    rowDel(data) {
      this.loading = true
      quoteOrderDeleteById(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t('common.deleteSuccess'))
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },
    exportEXl(data) {
      exportExcel(exportExlUrl + data)
    },
  }
}
</script>
